<template>
	<view>
		<view class="address">
			<view class="t">
				<text>张星星 </text>
				<text style="font-size: 28rpx; margin-left: 25rpx;">17621111111</text>
			</view>
			<view class="b">辽宁省沈阳市铁西路30号</view>
		</view>
		<view class="goods">
			<view class="img">
				<image class="img"
					src="https://img.js.design/assets/img/668c9ee084a543139ecb06cb.jpg#4daecb55af26b59c4ba5893a9ca94283"
					mode=""></image>
			</view>
			<view class="info">
				<view class="tinfo">
					<view class="t">
						商品名称
					</view>
					<view class="n">
						数量：50瓶
					</view>
				</view>
				<view class="p">
					<text class="u">¥</text>
					<text class="pp">99</text>
				</view>
			</view>
		</view>
		<view class="info-box">
			<view class="item fcs" v-for="(item, index) in infos" :key="index">
				<view class="l">
					{{ item.label }}
				</view>
				<view class="r">
					{{ item.value }}
				</view>
			</view>
		</view>
		
		<view class="btns">
			<u-button size="mini" shape="circle" @click="toChangeAddress">地址变更</u-button>
			<u-button size="mini" shape="circle">确认今日收货</u-button>
			<u-button size="mini" shape="circle">暂停配送</u-button>
			<u-button size="mini" shape="circle">恢复配送</u-button>
			<u-button size="mini" shape="circle">取消申请</u-button>
			<u-button size="mini" shape="circle" :custom-style="customStyle" @click="toRefund">退款</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				customStyle: {
					background: 'linear-gradient(135.88deg, #F1714E 0%, #E93E30 100%);',
					color: '#FFF'
				},
				infos: [
					{
						label: '订单号：',
						value: '78978978987'
					},
					{
						label: '订单金额：',
						value: '￥99'
					},
					{
						label: '订单状态：',
						value: '待配送'
					},
					{
						label: '订单时间：',
						value: '2024-05-15 12:00:00'
					},
					{
						label: '支付时间：',
						value: '2024-05-15 12:00:00'
					},
					{
						label: '开始配送日期：',
						value: '2024-05-15'
					},
					{
						label: '最近配送日期：',
						value: '2024-05-15'
					},
					{
						label: '配送时间：',
						value: '上午'
					},
					{
						label: '待配送数量：',
						value: '100'
					}
				]
			};
		},
		methods: {
			toChangeAddress() {
				uni.navigateTo({
					url: '/pages/change-address/change-address'
				})
			},
			toRefund() {
				uni.navigateTo({
					url: '/pages/refund/refund'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.btns {
		display: flex;
		// align-items: center;
		justify-content: flex-end;
		height: 98rpx;
		background-color: #FFF;
		width: 100%;
		padding-bottom: 108rpx;
		padding-top: 30rpx;
		position: fixed;
		left: 0;
		bottom: 0;
		::v-deep .u-btn {
			margin-left: 20rpx;
		}
	}
	.info-box {
		margin-top: 21.5rpx;
		padding: 31rpx 35rpx;
		background-color: #FFF;
		border-radius: 10rpx;
		.item {
			margin-bottom: 31rpx;
			color: #333333;
			font-size: 26rpx;
			font-weight: 500;
		}
		.item:last-child {
			margin-bottom: 0;
		}
	}
	.goods {
		display: flex;
		align-items: center;
		margin-top: 21.5rpx;
		padding: 31rpx 35rpx;
		background-color: #FFF;
		border-radius: 10rpx;
		.info {
			height: 180rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			// .pp {
			// 	color: #E93E30;
			// 	font-size: 30rpx;
			// 	font-weight: 500;
			// }

			// .u {
			// 	color: #E93E30;
			// 	font-size: 24rpx;
			// 	font-weight: 500;
			// }

			.n {
				margin-top: 14rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: #999999;
			}

			.t {
				font-size: 26rpx;
				font-weight: 400;
				color: #1E1E1E;
			}
		}

		.img {
			width: 180rpx;
			height: 180rpx;
			border-radius: 10rpx;
			margin-right: 20rpx;
		}
	}

	.address {
		padding: 31rpx 35rpx;
		background-color: #FFF;
		border-radius: 10rpx;

		.b {
			margin-top: 11.5rpx;
			color: #999999;
			font-size: 26rpx;
			font-weight: 400;
		}

		.t {
			font-size: 32rpx;
			font-weight: 500;
			color: #212121;
		}
	}
</style>
<style>
	page {
		padding: 20rpx;
		box-sizing: border-box;
		background-color: #F5F6F8;
	}
</style>